<template>
  <div class="login">
    <van-nav-bar title="登录" left-arrow @click-left="onClickLeft" />
    <!-- vuex:{{ $store.state.num }} -->
    <div class="middle">
      <img src="../../assets/logo.png" alt="">
    </div>
    <van-form @submit="goLogin">
      <van-cell-group inset>
        <van-field v-model="account" name="用户名" label="用户名" placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="password" type="password" name="密码" label="密码" placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]" />
      </van-cell-group>
      <van-field class="checkBox" name="checkbox" :rules="[{ required: true, message: '请同意协议' }]">
        <template #input>
          <van-checkbox v-model="checked" label-disabled>请您阅读并同意
            <a href="#">用户协议</a>
            和
            <a href="#">隐私政策</a>
            及 <a href="#">用户个人信息保护政策</a>
          </van-checkbox>
        </template>
      </van-field>
      <div>
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
        <van-button class="codeLg" round block type="primary" @click="goLogin2">
          验证码登录
        </van-button>
        <van-button class="codeLg" round block type="primary" @click="goLogin3">
          下载
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script lang="ts" setup="props">
import { ref } from 'vue';
import { useRouter } from "vue-router";
import { login } from '../../api/index'
import { Toast } from 'vant'
const router = useRouter();
const account = ref('');
const password = ref('');
const checked = ref(false);

let formData = new FormData();
const goLogin = () => {
  // let obj = { account: account.value, password: password.value }
  formData.append('account', account.value);
  formData.append('password', password.value);
  window.localStorage.removeItem("accessToken");
  login(formData).then(res => {
    if (res.code == 1) {
      window.localStorage.setItem("accessToken", res.data.userinfo.token);
      router.push("/");
    } else {
      Toast(res.msg)
    }
    // console.log("res ->", res.data)
  }).catch(err => console.error(err));

  formData = new FormData();
};
const goLogin2 = () => {
  router.push("/login2");
};
const goLogin3 = () => {
  router.push({
    path: window.open('https://app.changgongwang.com/hqsm.apk')
  })
};
const onClickLeft = () => history.back();

</script>
<style lang="less" scoped>
@import url(../../style/common.css);

.login {
  background: #F6F7F9;
  width: 100%;
  height: 100vh;

  .van-nav-bar {
    height: 52px;
  }
}

:deep(.van-nav-bar__left .van-badge__wrapper) {
  color: #272635;
}


.middle {
  width: 200px;
  height: 124px;
  // background: #D8D8D8;
  font-size: 30px;
  color: #3D3D3D;
  margin: 40px auto 30px;
  // line-height: 124px;
  // border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 100px;
    height: 100px
  }
}

.van-form {
  // width: 345px;
  height: 101px;
  box-sizing: border-box;
  margin: 0 15px;
  background: none;

  .van-cell-group {
    border-radius: 10px 10px 10px 10px;

    .van-field {
      border-radius: 10px 10px 10px 10px;
    }
  }

  .van-button {
    box-sizing: border-box;
    margin-top: 16px;
    width: 100%;
    height: 44px;
    border-radius: 347px 347px 347px 347px;
  }


  .codeLg {
    box-sizing: border-box;
    background: #232323;
    margin: 10px 0;

  }

  :deep(.checkBox) {
    background: none;
  }
}
</style>